<template>
  <div class="wrap">
    <header>我的信息</header>
    <flow>
      <flow-state state="1"
                  is-done
                  title="核对">
      </flow-state>
      <flow-line is-done></flow-line>
      <flow-state state="2"
                  title="填写"
                  is-done></flow-state>
      <flow-line is-done></flow-line>
      <flow-state state="3"
                  title="复核"
                  is-done></flow-state>
      <flow-line tip="进行中"></flow-line>
      <flow-state state="4"
                  title="提交"></flow-state>
      <flow-line></flow-line>
      <flow-state state="5"
                  title="服务台确认"></flow-state>
      <flow-line></flow-line>
      <flow-state state="6"
                  title="完成"></flow-state>
    </flow>
    <group class="box">
      <x-input v-for="(input,index) in group"
               :key="index"
               disabled
               label-width="120px"
               :title="input.title"
               :placeholder="input.placeholder"
               :value="input.value"></x-input>
      <x-textarea title="家庭住址"
                  readonly
                  autosize
                  class="ellipsis"
                  :value="address"></x-textarea>
      <x-input disabled
               style="height: 0;"></x-input>
      <p class="tips">
        友情提示：信息一旦提交，您将不能修改，
        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请仔细复核您的信息是否正确!
      </p>
      <flexbox style="margin: 15px auto 25px;">
        <flexbox-item>
          <x-button @click.native="goBack">上一步</x-button>
        </flexbox-item>
        <flexbox-item>
          <x-button @click.native="toNext">提交</x-button>
        </flexbox-item>
      </flexbox>
    </group>
    <div v-transfer-dom>
      <confirm v-model="showtip"
               title="操作提示"
               @on-confirm="toCommit">
        <p style="text-align:center;">{{ tipmsg }}<br>{{ tipmsg2 }}</p>
      </confirm>
    </div>
    <p class="copyright">技术支持&copy;三月软件小组</p>
    <toast v-model="showmsg"
           type="warn">{{msg}}</toast>
  </div>
</template>
<script>
export default {
  data() {
    return {
      showmsg: false,
      msg: "",
      dormitory: "",
      group: [
        {
          title: "姓名",
          placeholder: "李雨桐",
          value: ""
        },
        {
          title: "身份证号",
          placeholder: "410521201901015528",
          value: ""
        },
        {
          title: "性别",
          placeholder: "女",
          value: ""
        },
        {
          title: "政治面貌",
          placeholder: "",
          value: ""
        },
        {
          title: "班级",
          placeholder: "教育172",
          value: ""
        },
        {
          title: "宿舍",
          placeholder: "4#705",
          value: ""
        },
        {
          title: "辅导员姓名",
          placeholder: "奥特曼",
          value: ""
        },
        {
          title: "辅导员手机号",
          placeholder: "",
          value: ""
        },
        {
          title: "微信号",
          placeholder: "",
          value: ""
        },
        {
          title: "QQ号",
          placeholder: "",
          value: ""
        },
        {
          title: "联系方式",
          placeholder: "",
          value: ""
        }
      ],
      address: "",
      showtip: false,
      tipmsg: "信息提交将不可修改!",
      tipmsg2: "您确定要提交吗？"
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.forms = from.path == "/students/successReg" ? true : false;
      if (vm.forms) {
        vm.$router.push("/students/register");
      }
    });
  },
  mounted: function() {
    //从localStorage中获取学生信息和宿舍信息显示到表单
    var student = JSON.parse(window.localStorage.getItem("student"));
    var _this = this;
    _this.group[0].value = student.name;
    _this.group[1].value = student.card_id;
    _this.group[2].value = student.sex;
    _this.group[3].value = student.polApp;
    _this.group[4].value = student.classes;
    _this.group[5].value = student.dorHouse;
    _this.group[6].value = student.counselor_name;
    _this.group[7].value = student.counselor_num;
    _this.group[8].value = student.wechat_id;
    _this.group[9].value = student.qq_id;
    _this.group[10].value = student.phone_num;
    _this.address = student.address;
  },
  methods: {
    goBack() {
      this.$vux.loading.show({
        text: "Loading"
      });
      setTimeout(() => {
        this.$vux.loading.hide();
        this.$router.push("/students/setInfo");
      }, 300);
    },
    toNext() {
      this.showtip = true;
    },
    toCommit() {
      var _this = this;
      _this.axios
        .post("/student/updstu")
        .then(resp => {
          if (resp.data.code == 0) {
            _this.$vux.loading.show({
              text: "Loading"
            });
            setTimeout(() => {
              this.$vux.loading.hide();
            }, 300);
            _this.$router.push("/students/successReg");
          } else if (resp.data.code == 1) {
            _this.msg = resp.data.msg;
            _this.showmsg = true;
            this.$router.push("/students/register");
          } else if (resp.data.code == 2) {
            _this.$router.push("/students/register");
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>

<style lang="less" scoped>
.ellipsis /deep/ .weui-label {
  width: 120px !important;
}
.ellipsis /deep/ .weui-textarea {
  color: #888;
}
.wrap {
  position: relative;
  padding-bottom: 60px;
  background: linear-gradient(#fff, #afd0e4);
}

header {
  height: 60px;
  line-height: 60px;
  font-size: 21px;
  text-align: center;
  color: #fff;
  background-color: rgba(11, 83, 155, 1);
}
.box {
  margin: 0 15px;
  box-shadow: 0 5px 18px #b3acac87;
  div {
    padding: 15px;
    color: rgb(102, 102, 102);
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.tips {
  margin: 0 15px;
  font-size: 12px;
  color: rgb(255, 0, 0);
}
// vux.button.class
.weui-btn {
  background: rgb(0, 160, 233);
  color: #fff;
  width: 100px;
  border-radius: 2px;
  cursor: pointer;
}
.copyright {
  font-size: 11px;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translate(-50%, -50%);
}
.weui-wepay-flow,
.weui-wepay-flow-auto {
  padding: 18px 25px 23px;
}
</style>


